import React, { Component } from 'react'
import { Card, Button, Table, Pagination } from 'antd'
import table_columns from './table.jsx'
import { list } from '@/api/category-api.js'
import AddCategory from './add'
/**
 * 商品分类
 */
export default class index extends Component {
  state = {
    tableData: [],
    title: '一级分类列表',
    rootTtile: null,
    loading: true,
  }
  componentDidMount() {
    this.page(0)
  }
  page(parentId) {
    list(parentId).then((v) => {
      this.setState({
        tableData: v.data,
        loading: false,
      })
    })
  }
  /**
   * 新增和编辑
   * @param {*} v
   */
  editCategory(v) {
    this.refs.addCategory.showModal(v)
  }
  rootPage() {
    this.setState({
      rootTtile: null,
    })
    this.page(0)
  }
  /**
   * 查看子类别
   * @param {c} v
   */
  lookeChildCategory(v) {
    this.page(v._id)
    this.setState({
      rootTtile: v.name,
    })
  }
  onShowSizeChange(current, pageSize) {
    console.log(current, pageSize)
  }
  render() {
    const extra = (
      <Button icon="plus" type="primary" onClick={() => this.editCategory()}>
        添加
      </Button>
    )
    return (
      <Card
        title={
          this.state.rootTtile ? (
            <span onClick={() => this.rootPage()}>
              {this.state.title + '=>' + this.state.rootTtile}
            </span>
          ) : (
            this.state.title
          )
        }
        style={{ height: '100%', border: 'none' }}
        extra={extra}
      >
        <Table
          bordered
          columns={table_columns(this)}
          pagination={{
            showQuickJumper: true,
            defaultCurrent: 1,
            defaultPageSize: 5,
            total: this.state.tableData.length,
            // showTotal: (total) => `总计${total}页`,
          }}
          loading={this.state.loading}
          dataSource={this.state.tableData}
          rowKey="_id"
        />
        <AddCategory ref="addCategory" getList={() => this.page()} />
      </Card>
    )
  }
}
